<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<title>WebSocket简单聊天室</title>
	<meta charset="utf-8" name="viewport" content="width=device-width">
	<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/mdui/0.4.3/js/mdui.min.js"></script>
	<link href="https://cdn.bootcss.com/mdui/0.4.3/css/mdui.min.css" rel="stylesheet">
</head>
<body class="mdui-theme-primary-indigo mdui-theme-accent-pink">

<div class="mdui-container">
	<div class="mdui-toolbar mdui-color-theme">
		<a class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">menu</i></a>
		<span class="mdui-typo-title">简单聊天室</span>
		<div class="mdui-toolbar-spacer"></div>
		<a class="mdui-btn mdui-btn-icon" href="http://showdoc.itplh.com" target="_blank"><i
			class="mdui-icon material-icons">search</i></a>
		<a class="mdui-btn mdui-btn-icon" th:href="@{/}"><i
			class="mdui-icon material-icons">exit_to_app</i></a>
		<a class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">more_vert</i></a>
	</div>
</div>

<div>
	<div class="mdui-container container_text">

		<div class="mdui-row">
			<div class="mdui-col-xs-12 mdui-col-sm-6">
				<div class="mdui-col-xs-12 mdui-col-sm-10">
					<div class="mdui-textfield-floating-label" style="margin-top:15px">
						<i class="mdui-icon material-icons">欢迎：</i>
						<i class="mdui-icon" id="username" th:text="${username}"></i>
					</div>
				</div>
				<div class="mdui-col-xs-12 mdui-col-sm-10">
					<div class="mdui-textfield mdui-textfield-floating-label">
						<i class="mdui-icon material-icons">textsms</i>
						<label class="mdui-textfield-label">发送内容</label>
						<input class="mdui-textfield-input" id="msg"/>
					</div>
					<div class="mdui-container" style="padding:20px 35px">
						<button class="mdui-btn mdui-color-theme-accent mdui-ripple"
						        onclick="sendMsgToServer()">发送 (enter)
						</button>
						<button class="mdui-btn mdui-color-theme mdui-ripple"
						        onclick="clearMsg()">清屏
						</button>
					</div>
				</div>
			</div>

			<div class="mdui-col-xs-6 mdui-col-sm-5" style="padding:10px 0">
				<div class="mdui-chip">
                    <span class="mdui-chip-icon mdui-color-blue">
                        <i class="mdui-icon material-icons">&#xe420;</i></span>
					<span class="mdui-chip-title">聊天内容</span>
				</div>

				<div class="mdui-chip">
                    <span class="mdui-chip-icon mdui-color-blue">
                        <i class="mdui-icon material-icons">face</i></span>
					<span class="mdui-chip-title">在线人数</span>
					<span class="mdui-chip-title chat-num">0</span>
				</div>
				<div class="message-container">

				</div>
			</div>

		</div>
	</div>
</div>

<script th:inline="javascript">

	// 消息类型
	var MESSAGE_TYPE = {
		USER_ONLINE: 'ENTER', // 用户上线
		USER_OFFLINE: 'QUIT', // 用户下线
		USER_SPEAK: 'SPEAK', // 用户发言
	}

	/**
	 * WebSocket客户端
	 *
	 * 使用说明：
	 * 1、WebSocket客户端通过回调函数来接收服务端消息。例如：webSocket.onmessage
	 * 2、WebSocket客户端通过send方法来发送消息给服务端。例如：webSocket.send();
	 */
	function getWebSocket() {
		/**
		 * WebSocket客户端 PS：URL开头表示WebSocket协议 中间是域名端口 结尾是服务端映射地址
		 */
		var webSocket = new WebSocket([[${webSocketUrl}]]);
		/**
		 * 当服务端打开连接
		 */
		webSocket.onopen = function (event) {
			console.log('WebSocket打开连接');
		};

		/**
		 * 当服务端发来消息：1.广播消息 2.更新在线人数
		 */
		webSocket.onmessage = function (event) {
			console.log('WebSocket收到消息：%c' + event.data, 'color:green');
			//获取服务端消息
			var message = JSON.parse(event.data) || {};
			var $messageContainer = $('.message-container');
			//用户发言
			if (message.type === MESSAGE_TYPE.USER_SPEAK) {
				$messageContainer.append(
					'<div class="mdui-card" style="margin: 10px 0;">'
					+  '<div class="mdui-card-primary">'
					+    '<div class="mdui-card-content message-content">' + message.username + "：" + message.msg + '</div>'
					+  '</div>'
					+'</div>'
				);
			}
			//用户上线
			else if (message.type === MESSAGE_TYPE.USER_ONLINE) {
				$messageContainer.append(
					'<div class="mdui-card" style="margin: 10px 0;">'
					+  '<div style="padding: 12px 32px;color: #EEB422;">' + message.username + "，" + message.msg + '</div>'
					+'</div>'
				);
			}
			//用户下线
			else if (message.type === MESSAGE_TYPE.USER_OFFLINE) {
				$messageContainer.append(
					'<div class="mdui-card" style="margin: 10px 0;">'
				  +  '<div style="padding: 12px 32px;color: #CD00CD;">' + message.username + "，" + message.msg + '</div>'
					+'</div>'
				);
			}
      // 更新在线人数
			$('.chat-num').text(message.onlineCount);
			//防止刷屏
			var $cards = $messageContainer.children('.mdui-card:visible').toArray();
			if ($cards.length > 5) {
				$cards.forEach(function (item, index) {
					index < $cards.length - 5 && $(item).slideUp('fast');
				});
			}
		};

		/**
		 * 关闭连接
		 */
		webSocket.onclose = function (event) {
			console.log('WebSocket关闭连接');
		};

		/**
		 * 通信失败
		 */
		webSocket.onerror = function (event) {
			console.log('WebSocket发生异常');
		};
		return webSocket;
	}

	var webSocket = getWebSocket();

	/**
	 * 通过WebSocket对象发送消息给服务端
	 */
	function sendMsgToServer() {
		var $message = $('#msg');
		if ($message.val()) {
			var message = {username: $('#username').text(), msg: $message.val()}
			webSocket.send(JSON.stringify(message));
			$message.val(null);
		}
	}

	/**
	 * 清屏
	 */
	function clearMsg() {
		$(".message-container").empty();
	}

	/**
	 * 使用ENTER发送消息
	 */
	document.onkeydown = function (event) {
		var e = event || window.event || arguments.callee.caller.arguments[0];
		e.keyCode === 13 && sendMsgToServer();
	};

</script>

</body>
</html>
